<template>
  <view v-loading="loading" class="defect-state-chart" :style="{height:height,width:width}">
    <!-- <div class="chart-tools">
      <el-radio-group v-model="query.timeType" size="mini" @input="handleTimeTypeChange">
        <el-radio-button v-for="tt in timeTypeList" :key="tt.value" :label="tt.value">{{$t(tt.label).toString()}}</el-radio-button>
      </el-radio-group>
      <el-tooltip class="item" effect="dark" :content="$t('export')" placement="right-end">
        <el-button type="text" icon="el-icon-download" @click="handleExport"></el-button>
      </el-tooltip>
    </div> -->
    <!-- <h1 class="title">{{ $t(title) }}</h1> -->
    <!-- <view v-loading="loading" ref="defectStateChart" :class="className" :style="{height:height,width:width}"></view> -->
	<!-- <uni-ec-canvas canvas-id="uni-ec-canvas" :ec="ec" ref="defectStateChart" :style="{height:height,width:width,display:'block'}"></uni-ec-canvas> -->
	 <qiun-data-charts 
	      type="line"
	      :opts="opts"
	      :chartData="chartData"
	    />
  </view>
</template>

<script>
import * as echarts from "@/components/uni-ec-canvas/echarts.min.js";
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import uCharts from '@qiun/ucharts';
// import * as echarts from 'echarts';
// require('echarts/theme/macarons') // echarts theme
import { defectLine } from "@/api/system/dashboard.js"

let chart = null;
var uChartsInstance = {};
export default {
  name: "DefectStateChart",
  components: {
		uniEcCanvas
	},
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400rpx'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
		chartData: {},
		opts: {
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			        padding: [15,10,0,15],
			        enableScroll: false,
			        legend: {},
			        xAxis: {
					  labelCount: 1
			        },
			        yAxis: {
			          gridType: "dash",
			          dashLength: 2,
					  splitNumber: 3
			        },
			        extra: {
			          line: {
			            type: "curve",
			            width: 2,
			            activeType: "hollow"
			          }
			        }
		},
      loading: false,
	  ec: { lazyLoad: true },
      timeTypeList: [
        {value:'day', label: 'dashboard.day'},
        {value:'month', label: 'dashboard.month'}],
      title: 'dashboard.defect-state.day',
      query: {
        timeType: 'day'
      },
		types: [],
		times: [],
		series: []
    }
  },
  computed: {
    /** 获取项目id */
    projectId() {
      return parseInt(this.$store.state.user.config.currentProjectId);
    },
  },
  methods: {
	  refresh1() {
		setTimeout(() => {
		  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		  let res = {
			  categories: ["2016","2017","2018","2019","2020","2021"],
			  series: [
				{
				  name: "目标值",
				  data: [0,0,0,0,0,2]
				},
				{
				  name: "完成量",
				  data: [0,0,0,0,0,0]
				}
			  ]
			};
		  this.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	  },
	  getDefectStateName(key) {
		  return key;
	  },
    refresh() {
      this.loading = true;
      defectLine(this.projectId, this.query).then(res=>{
        this.loading = false;
        let series = [];
        res.data.types.forEach(k=>{
          if(!res.data.data[k]) return;
          series.push({
            name: this.getDefectStateName(k),
            data: res.data.data[k],
			formatter: function(value,index,series,opts) {
				return '';
				// if(value===0)
				// 	return '';
				// else 
				// 	return value+'';
			},
			format: ''
          });
        });
		this.series = series;
        this.types = res.data.types.map(t=>{
          return t;
        });
        this.times = res.data.times;
		if (chart) chart.dispose();
		// this.$refs.defectStateChart.init(this.initChart);
		
		let opt = {
			categories: res.data.times,
			series: series,
			yAxis: {
				splitNumber: 2,
				showTitle: false
			},
		};
		this.chartData = JSON.parse(JSON.stringify(opt));
		
		console.log(this.chartData)
		
      }).catch(e=>this.loading=false);
    },
	initChart(canvas, width, height, canvasDpr) {
	    chart = echarts.init(canvas);
		canvas.setChart(chart);
		this.setOptions(this.types, this.times, this.series);
	    return chart;
	},
    setOptions(legendData, xData, series) {
      chart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: '35',
            left: '3%',
            right: '4%',
            type: 'scroll',
            width: 'auto',
            data: legendData,
          },
          grid: {
            top: '70',
            left: '4%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            type: 'value',
			splitNumber: 2
          },
          series: series
      }, true);
    },
    /** 处理时间类型变更 */
    handleTimeTypeChange(val) {
      switch (this.query.timeType) {
        case 'day':
          this.title = 'dashboard.defect-state.day';
          break;
        case 'month':
          this.title = 'dashboard.defect-state.month';
          break;
      }
      this.getDefectLine();
    },
  }
}
</script>

<style lang="scss" scoped>
.defect-state-chart {
  position: relative;
  // .title {
  //   position: absolute;
  //   top: 7px;
  //   margin-top: 0px;
  // }
}
// .chart-tools {
//   position: absolute;
//   z-index: 9;
//   top: 7px;
//   right: 10px;
//   display: inline-flex;
//   flex-direction: row;
//   align-items: center;
//   gap: 10px;
//   ::v-deep .el-radio-button__inner {
//     padding: 3px 5px;
//   }
// }
</style>
